<template>
  <div class="main_spac1 maincl">
    <div class="main_white padding10">
      <div class="mainor_form">
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          ref="searchForm"
          label-width="80px"
        >
          <el-form-item label="订单">
            <el-input
              v-model.trim="form.key"
              placeholder="订单号"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="订单状态">
            <el-select
              v-model="form.order_status"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(val, index) in orderStatusList"
                :key="index"
                :value="index"
                :label="val"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="下单日期">
            <el-date-picker
              v-model="form.time"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <div class="clearfix"></div>
          <el-form-item class="marginTop10">
            <el-button
              class="reset marginLeft10"
              type="primary"
              @click="reset()"
              >重置</el-button
            >
            <el-button
              type="primary"
              @click="getArticleList"
              :loading="listLoading"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <div class="main_table" style="min-height: 590px">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list"
          element-loading-text="加载中"
          fit
          border
          highlight-current-row
        >
          <el-table-column type="selection" />

          <el-table-column
            label="客户"
            width="100"
            prop="company_name"
            :show-overflow-tooltip="true"
          >
          </el-table-column>

          <el-table-column
            label="订单号"
            width="200"
            prop="order_sn"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            label="订单金额"
            prop="order_money"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="订单状态"
            prop="order_status"
            sortable
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span
                :style="{
                  color:
                    scope.row.order_status == 0
                      ? '#fa3534'
                      : scope.row.order_status == 4
                      ? '#909399'
                      : scope.row.order_status == 3
                      ? '#18b566'
                      : '#ff9900',
                }"
              >
                {{ orderStatusList[scope.row.order_status] }}
              </span>
            </template>
          </el-table-column>

          <el-table-column
            label="收货人"
            prop="receiving_name"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            label="收货手机"
            width="150"
            prop="receiving_mobile"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="收货地址"
            width="300"
            prop="receiving_address"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            label="下单时间"
            prop="created_at"
            :show-overflow-tooltip="true"
            width="120"
          >
            <template slot-scope="scope">{{
              parseTime(scope.row.created_at, "{y}-{m}-{d}")
            }}</template>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="240"
            class-name="rightbtn"
          >
            <template slot-scope="scope">
              <el-button
                @click="detailAction(scope.row.id)"
                type="text"
                size="mini"
                class="handle_btn"
                >查看</el-button
              >
              <el-button
                @click="shipmentsAction(scope.row.id)"
                type="text"
                size="mini"
                style="color: #ff9900"
                class="handle_btn"
                v-if="scope.row.order_status == 1"
                >发货</el-button
              >
              <!-- <el-button
						@click="exportAction(scope.row)"
						type="text"
						size="mini"
						style="color:#19be6b"
						class="handle_btn"
					>导出</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="main_page boxdq">
        <div></div>
        <!-- 分页 -->
        <div class="main_page_r">
          <el-pagination
            :current-page="current.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>
    <!-- 发货弹窗 -->
    <el-dialog title="发货" :visible.sync="shipDialog">
      <el-form :model="shipForm" ref="shipForm" :rules="rules" size="medium">
        <el-form-item label="快递公司" prop="express_company_number">
          <el-select
            v-model="shipForm.express_company_number"
            placeholder="请选择快递公司"
            style="width: 174px"
          >
            <el-option
              v-for="(item, index) in expressCompany"
              :key="index"
              :label="item.express_company_name"
              :value="item.express_company_number"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="快递单号" prop="courier_number">
          <el-input
            v-model="shipForm.courier_number"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            shipDialog = false;
            $refs.shipForm.resetFields();
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="shipAction">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  devOrderList,
  getExpressCompany,
  devOrderDelivery,
} from "@/api/brokerage/devorder";
import { parseTime } from "@/utils/index";
export default {
  data() {
    return {
      // 时间
      parseTime,
      // 分页
      current: {
        page: 1,
        size: 20,
      },
      limit: 20,
      totalCount: 1,
      form: {}, // 搜索
      list: [], // 列表数据
      expressCompany: [], // 快递公司

      listLoading: false,
      // 全选
      selectArr: [],
      orderStatusList: {
        0: "待付款",
        1: "待发货",
        2: "待收货",
        3: "已完成",
        4: "已取消",
      }, //状态列表
      shipForm: {}, //发货
      shipDialog: false,
      rules: {
        express_company_number: [
          { required: true, message: "请选择快递公司", trigger: "change" },
        ],
        courier_number: [
          { required: true, message: "请输入快递单号", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.getData();
    this.getCompany();
  },
  methods: {
    // 获取列表
    getData() {
      this.listLoading = true;
      let data = { page: this.current.page, size: this.current.size };
      let search = this.list_form();
      Object.assign(data, search);
      devOrderList(data)
        .then((res) => {
          if (res.errcode == 0) {
            this.listLoading = false;
            this.list = res.data.list;
            this.totalCount = res.data.count;
          } else {
            this.$message.error(res.errmsg);
          }
        })
        .catch((err) => {});
    },
    //去账单详情
    detailAction(id) {
      this.$router.push({
        path: `/brokerage/devorder/detail?id=${id}`,
      });
    },
    //发货弹窗
    shipmentsAction(id) {
      this.shipForm = { id };
      this.shipDialog = true;
    },
    //发货
    shipAction() {
      this.$refs.shipForm.validate((valid) => {
        if (valid) {
          devOrderDelivery(this.shipForm).then((res) => {
            if (res.errcode == 0) {
              this.$message.success("提交成功！");
              this.$refs.shipForm.resetFields();
              this.shipDialog = false;
              this.getData();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        }
      });
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;

      this.getData();
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.getData();
    },
    changePage(page) {
      this.current.page = page;
      this.getData();
    },
    //获取快递公司
    getCompany() {
      getExpressCompany({}).then((res) => {
        if (res.errcode == 0) {
          this.expressCompany = res.data.list;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    //处理搜索表单
    list_form() {
      let form = {};
      for (let i in this.form) {
        if (this.form[i] != "") {
          form[i] = this.form[i];
        }
      }
      if (form.company_name) {
        delete form.company_name;
      }
      if (form.time) {
        form.create_start_time = form.time[0];
        form.create_end_time = form.time[1];
        delete form.time;
      }
      return form;
    },
    reset() {
      this.form = {};
      this.getData();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.maincl {
  .el-select {
    width: 114px;
  }
  .more {
    margin-left: 50px;
  }
  .handle_btn {
    padding: 0;
    border: 0;
    + .handle_btn {
      margin-left: 20px;
    }
  }
  .edit_dialog {
    .address {
      max-width: 350px;
    }
  }

  .mainor_form form {
    // width: calc(100% - 180px);
    width: 100%;
  }

  .main_table /deep/.el-table--small td {
    padding: 10px 0;
  }
  .main_table /deep/.el-table--small th {
    padding: 10px 0;
  }
  .zero_dialog {
    /deep/.el-dialog__body {
      padding-top: 0;
    }
    /deep/.el-alert {
      margin-bottom: 20px;
    }
  }

  /deep/.el-table {
    tr {
      &:hover {
        background: none !important;
      }
      &.hover-row > td {
        background: none !important;
      }
      .current-row > td {
        background: none !important;
      }
    }
  }
  /deep/.el-table .el-table__body tr:hover {
    background: #fff !important;
  }
  /deep/.el-table .el-table__body tr:hover > td {
    background: #fff !important;
  }
  /deep/.el-table tr.expanded + tr {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr > td {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .mainex_ta {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .mainex_ta th,
  /deep/.el-table tr.expanded + tr .mainex_ta tr {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr:hover {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr:hover > td {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .el-table tr:hover {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .el-table tr:hover > td {
    background: #fafafa !important;
  }
}
.finalDialog {
  .info {
    margin-bottom: 20px;
    overflow: hidden;
    > div {
      width: 50%;
      float: left;
      .row {
        margin-bottom: 10px;
        .label {
          color: #999;
          width: 100px;
          text-align: right;
          display: inline-block;
        }
      }
    }
  }
}
.el-table {
  .cell {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
